<!-- 这是图片详情页面 -->
<template>
  <div class="photoInfo-container">
    <div class="left">
      <photo-left></photo-left>
    </div>
    <div class="right">
      <!-- 侧边栏顶部 -->
      <div class="header">
        
          <img
            src="@/assets/icon1/dianzanw.svg"
            alt="点赞"
            title="点赞"
            style="width:20px;"
            v-if="dianzan"
            @click.prevent="dianzan=false"
          >
          <img
            src="@/assets/icon1/dianzansucc.svg"
            alt="取消点赞"
            title="取消点赞"
            style="width:20px;"
            v-else
            @click.prevent="dianzan=true"
          >
          &nbsp;&nbsp;
          <img
            src="@/assets/icon1/shoucanw.svg"
            alt="收藏"
            title="收藏"
            style="width:20px;"
            v-if="shoucan"
            @click.prevent="shoucan=false"
          >
          <img
            src="@/assets/icon1/shoucansucc.svg"
            alt="取消收藏"
            title="取消收藏"
            style="width:20px;"
            v-else
            @click.prevent="shoucan=true"
          >
        
        
          <el-dropdown style="    padding-left: 200px;">
            <span class="el-dropdown-link">
              <img src="@/assets/icon1/menu.svg" alt="下拉菜单" title="下拉菜单" style="width:20px;">
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>转发到小组</el-dropdown-item>
              <el-dropdown-item>举报</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        
      </div>
      <div class="main">
        <!-- 作者，关注 -->
        <div class="author">
          <div class="touxaing" style=" display: flex;">
            <el-popover placement="bottom" width="300px" trigger="hover"  style="border-shadow:5px 5px 5px 5px #eee; margin:0; padding:0;">
              <author-card></author-card>
              <a href="#" slot="reference">
                <img src="@/images/icon.jpg" alt style="width:40px;border-radius: 50%;">
              </a>
            </el-popover>&nbsp;&nbsp;&nbsp;
           
            <div class="name-time" >
              <div class="name">
                <span>ice</span>
              </div>
              <div class="time">
                <span>1月20日</span>
              </div>
            </div>
          </div>
          <div class="focus">
            <my-button buttonTitle="关注"></my-button>
        </div>
          </div>
        </div>
        <!-- 发表内容，标签，下载或购买 -->
        <div class="centent" style="    padding:10px 10px 15px 20px;">
          <span style="font-size:16px;"> 迹象</span><br><br>
          <span style="margin-top:20px; color: #fff;">
            距离城堡山很近的一个点位，弓河与并行的铁道在这里分离，转向遥远的远山........
            每次都会在这里逗留，而这次是一个早晨，天色仍然有些阴沉，好在远处的天际露出了些
            许缝隙，连绵的雪山微微展露，此时光线柔和淡泊，山无言，水无语，一切都不需要任何声响
            和言语，静默无声，有时是最好的方式和表达～
          </span><br><br>
          <span>#推荐 #风光</span>
          <my-button buttonTitle="购买并下载" style="margin-top:50px;" ></my-button>
          <span style="font-size:13px;">购买版权后可将图片用于商业或新闻用途</span>
        </div>
        <!-- 相机参数 -->
        <div class="camera-parameters" style="font-size:13px; margin:10px 20px;">
            <span>SONY ILCE-7RM3</span><br>
            <span>Helios 58mm/F2</span><br>
            <span>1/50s, ISO100</span>


        </div>
        <!-- 打赏 -->
        <div class="exceptional" style="    display: flex;
    justify-content: space-between; margin:10px 10px 20px 20px;">
            <span style="    padding-top: 5px;">你的打赏是我最好的鼓励</span>
            <my-button buttonTitle="打赏"></my-button>
        </div>
        <!-- 评论 -->
        <div class="argue" style="margin:10px 10px 20px 20px;">
            <argue></argue>
        </div>
      </div>
    </div>
  
</template>

<script>
import PhotoLeft from './photoLeft.vue'
import MyButton from './myButton.vue'
import Argue from './argue.vue'
import AuthorCard from './authorCard.vue'
export default {
  data() {
    return {
      seen: true,
      dianzan: true,
      shoucan: true,
      msg: '关注'
    }
 
  },
  components:{
      PhotoLeft,
        MyButton,
        Argue,
        AuthorCard
    }
};
</script>
<style lang="scss" scoped>
.photoInfo-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  display: block;
  overflow: hidden;
  height: 753px;
  width: 1538px;
  background-color: black;
  font-size:13px;

  .left {
    position: absolute;
    top: 0;
    right: 320px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: black;
  }
  .right {
    position: relative;
    width: 320px;
    height: 100%;
    margin-left: auto;
    overflow-y: auto;
    color: #fff;
    .header {
      position: fixed;
      top:0;
      padding: 10px 10px;
      height: 45px;
      background-color: black;
        img {
          cursor: pointer;
          transition: all 0.6s;
        }
        img:hover {
          transform: scale(1.4);
        }    
    }
    .main {
        margin-top:50px;
      .author {
        display: flex;
        justify-content: space-between;
        padding: 10px 10px;
        height: 75px;
        margin-bottom: 20px;
        .touxiang {
          img {
            cursor: pointer;
            transition: all 0.6s;
          }
          img:hover {
            transform: scale(1.4);
          }
        }
      }
      .content {
         #buy{
             margin-top:50px;
         } 
       .camera-parameters{
          margin:10px 20px;
          font-size: 13px;
          line-height: 20px;
          color:#fff;

       } 
      }
      .exceptional{
          display: flex;
          justify-content: space-between;
          span{
            font-size: 13px;
           line-height: 20px;
          }
      }
    }
  }
}
</style>